import { useState,useEffect } from "react"
import { useSelector,useDispatch } from "react-redux"
import { inscremment,decrement,addToNum } from './store/modules/counterStore'
import { fetchChannels } from "./store/modules/channelStore"
const URL = 'http://geek.itheima.net/v1_0/channels'
const islogin = true
function App() {
const {count} = useSelector(state=>state.counter)
const {channelList} = useSelector(state=>state.channel)
//提交action
const dispatch = useDispatch()
const countDispatch =()=>{
  dispatch(inscremment())
}


  const handclick =()=>{
    console.log('点击事件')
  }
  let [counts,setCount] = useState(0)
  const handclicks =()=>{
    setCount(counts+1)
  }

  const [form,setFrom] = useState({
    name:'21312312',
  })
  const handchange =(e)=>{
    setFrom({
      ...form,
      name:'张三'
    })
  }
  const [list,setList] = useState([])
  useEffect(()=>{
    console.log('组件挂载完成')
    fetch(URL).then(res=>res.json()).then(res=>{
      console.log(res)
      setList(res.data.channels)
    })
    dispatch(fetchChannels())
  },[dispatch])

  return (
    <div className="App">
     this is a app
      <ul>
        {
          channelList.map(item=>(
            <li key={item.id}>{item.name}</li>
          ))
        }
      </ul>
      {islogin ? <div>已登录</div> : <div>未登录</div>}
      {islogin && <div>已登录</div>}
      {!islogin && <div>未登录</div>}
      <div>
        <button onClick={handclick}>点击事件</button>
      </div>
      <div>
        <button onClick={handclicks}> { counts }</button>
        <button onClick={handchange}> 修改form {form.name}</button>
      </div>
      <div>
        <ul>
          {list.map(item=>(
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
      redux:{count}
      <button onClick={countDispatch}>点击+</button>
      <button onClick={()=>dispatch(decrement())}>点击-</button>
      <button onClick={()=>dispatch(addToNum(10))}>点击+10</button>
      <button onClick={()=>dispatch(addToNum(20))}>点击+20</button>

    </div>
  );
}

export default App;
